<template>
  <div>
    <el-drawer
      :visible.sync="drawer"
      direction="rtl"
      size="50%"
      :with-header="false"
      :width="700"
    >
      <div class="drawer_box">
        <div class="drawer_t">
          <div class="drawer_t_l">
            <img
              class="drawer_t_l_img"
              src="/static/skin/herodoo/main/platform/home/img/piliangoumai.png"
              alt=""
            />
            查看权益
          </div>
          <img
            class="drawer_t_r"
            src="/static/skin/herodoo/main/platform/home/img/guanbi.png"
            alt=""
            @click="drawer = false"
          />
        </div>
        <div class="drawer_c">
          <div class="rights" v-if="compileData.TypeID == 2">
            <div>权益组合</div>
            <div class="rightsList">
              <div>自有权益</div>
              <div class="rights_son_box" v-if="alreadyList.length > 0">
                <div
                  class="rights_son"
                  v-for="item in alreadyList"
                  :key="item.ID"
                >
                  <div class="title">{{ item.Name }}</div>
                  <div class="date">
                    使用期限：{{ item.EffectiveTime }} 至 {{ item.ExpireTime }}
                  </div>
                  <div class="repert-box">
                    <div class="repert-left">
                      库存：{{ item.InventoryQuantity }}份 数量: x{{
                        item.EquityCount
                      }}份
                    </div>
                    <div class="repert-right">
                      ¥{{ item.CostPrice }}
                      <span
                        style="color: rgba(201, 201, 201, 1);font-size: 16px;"
                        >￥{{ item.SalePrice }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="rightsList">
              <div>已购权益</div>
              <div class="rights_son_box" v-if="buyList.length > 0">
                <div class="rights_son" v-for="item in buyList" :key="item.ID">
                  <div class="title">{{ item.Name }}</div>
                  <div class="date">
                    使用期限：{{ item.EffectiveTime }} 至 {{ item.ExpireTime }}
                  </div>
                  <div class="repert-box">
                    <div class="repert-left">
                      库存：{{ item.InventoryQuantity }}份 数量: x{{
                        item.EquityCount
                      }}份
                    </div>
                    <div class="repert-right">
                      ¥{{ item.CostPrice }}
                      <span
                        style="color: rgba(201, 201, 201, 1);font-size: 16px;"
                        >￥{{ item.SalePrice }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="rights">
            <div>基础信息</div>
            <div class="rightsList">
              <div>权益名称</div>
              <div>{{ compileData.Name }}</div>
            </div>
            <div class="rightsList">
              <div>公司名称</div>
              <div>{{ compileData.CompanyName }}</div>
            </div>
            <div class="rightsList" v-if="compileData.TypeID == 1">
              <div>产品类型</div>
              <div>{{ compileData.ProductFlagListName }}</div>
            </div>

            <div class="rightsList" v-if="compileData.TypeID == 1">
              <div>产品名称</div>
              <div>{{ compileData.ProductName }}</div>
            </div>
            <div class="rightsList">
              <div>权益标签</div>
              <div class="flex" v-if="compileData.EquityFlagListName">
                <div
                  class="rights-tag"
                  v-for="(item, index) in compileData.EquityFlagListName.split(
                    ','
                  )"
                  :key="index"
                >
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="rightsList">
              <div>采购公司权限设置</div>
              <div>
                <div class="flex" v-if="compileData.TransferRuleIDName">
                  <div
                    class="rights-tag auth-tag"
                    v-for="(item,
                    index) in compileData.TransferRuleIDName.split(',')"
                    :key="index"
                    effect="plain"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
            </div>
            <div class="rightsList">
              <div>使用期限</div>
              <div class="deadline">
                {{ compileData.EffectiveTime }} 至 {{ compileData.ExpireTime }}
              </div>
            </div>
            <div class="rightsList">
              <div>库存数量</div>
              <div>{{ compileData.InventoryQuantity }}份</div>
            </div>
            <div class="rightsList">
              <div>起购数量</div>
              <div>{{ compileData.MinimumQuantity }} 份</div>
            </div>
            <div class="rightsList">
              <div>市场价格</div>
              <div>{{ compileData.SalePrice }} 元</div>
            </div>
            <div class="rightsList">
              <div>平台价格</div>
              <div>{{ compileData.CostPrice }} 元</div>
            </div>
            <div class="rightsList" v-if="compileData.TypeID == 1">
              <div>权益平台服务费%</div>
              <div>{{ compileData.PlatformServiceRate*100 }}</div>
            </div>
            <div class="rightsList" v-if="compileData.TypeID == 1">
              <div>小程序服务费%</div>
              <div>{{ compileData.EquityServiceRate*100 }}</div>
            </div>
            <div class="rightsList">
              <div>让利积分</div>
              <div>{{ compileData.Integral }} 分</div>
            </div>
            <div class="rightsList">
              <div>权益平台结算价格</div>
              <div>{{ compileData.PlatformServicePrice }}元</div>
            </div>
            <div class="rightsList">
              <div>小程序结算价格</div>
              <div>{{ compileData.EquityServicePrice }}元</div>
            </div>
            <div class="rightsList">
              <div>是否允许在其他国企、民企平台进行售卖</div>
              <div>{{ compileData.IsOpenSale ? "是" : "否" }}</div>
            </div>

            <div class="rightsList">
              <div>使用地址</div>
              <div>{{ compileData.Address }}</div>
            </div>
            <div class="rightsList" v-if="compileData.TypeID == 1">
              <div>使用人数</div>
              <div>{{ compileData.UsersCount }}</div>
            </div>
            <div class="rightsList" v-else>
              <div>使用人数</div>
              <div>
                <el-table
                  :data="[...alreadyList, ...buyList]"
                  stripe
                  max-height="250"
                  style="width: 100%;font-size: 1rem;"
                >
                  <el-table-column prop="Name" label="权益名称">
                  </el-table-column>
                  <el-table-column prop="UserCount" label="使用人数">
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="rightsList">
              <div>购买是否需要提供身份信息</div>
              <div>
                {{ compileData.IsRealNameAuthentication ? "是" : "否" }}
              </div>
            </div>
            <div class="rightsList">
              <div>是否允许退款</div>
              <div>{{ compileData.IsRefund ? "是" : "否" }}</div>
            </div>

            <!-- <div class="rightsList">
              <div>海报</div>
              <div>
                <img class="rightsImage" :src="mainUrl" alt="" />
              </div>
            </div> -->
            <div class="rightsList">
              <div>权益主图</div>
              <div>
                <img class="rightsImage" :src="mainUrl" alt="" />
              </div>
            </div>
            <div class="rightsList">
              <div>权益附图</div>
              <div>
                <img
                  class="rightsImage"
                  v-for="(item, index) in imgsUrl"
                  :key="index"
                  :src="item.url"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div class="rights">
            <div>权益内容</div>
            <div class="rightsList rightsContent w100">
              <div>权益详情</div>
              <div v-html="compileData.Description"></div>
            </div>
            <div class="rightsList rightsContent w100">
              <div>使用规则</div>
              <div v-html="compileData.UseRuleDescription"></div>
            </div>
            <div class="rightsList">
              <div>退款是否需要审核</div>
              <div>{{ compileData.IsRefundAudit ? "是" : "否" }}</div>
            </div>

            <div class="rightsList rightsContent">
              <div :class="{ 'font-bold': compileData.TypeID == 2 }">
                退款规则
              </div>
              <div v-if="compileData.TypeID == 1 && refundList.length">
                <div v-for="(item, index) in refundList[0].list" :key="index">
                  {{ item.Name }}
                </div>
              </div>
              <div class="rule-box" v-else>
                <div
                  class="rule-item"
                  v-for="(item, index) in refundList"
                  :key="index"
                >
                  <div class="title">{{item.title}}</div>
                  <div class="rules">
                    <div v-for="rule in item.list" :key="rule.ID">
                      {{ rule.Name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <br />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "bulkBuying",
  props: {
    rightsId: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      drawer: false,
      refundList: [], //退款规则
      compileData: {},
      rightsId: null,
      alreadyList: [],
      buyList: [],
      arr1: [],
      arr2: []
    };
  },
  computed: {
    mainUrl() {
      return this.compileData.MainPicturePath
        ? JSON.parse(this.compileData.MainPicturePath)[0].url
        : "";
    },
    imgsUrl() {
      return this.compileData.MainPicturePath
        ? JSON.parse(this.compileData.MainPicturePath)
        : [];
    }
  },
  methods: {
    init(id) {
      this.rightsId = id;
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1195,
          cellData: [
            { name: "Address" }, // 使用地址
            { name: "Name" }, // 权益标题
            { name: "ProductFlagListName" }, // 产品类型
            { name: "TypeID" }, // 是否为权益礼包
            { name: "CompanyID" }, // 提交企业
            { name: "CompanyName" }, // 提交企业
            { name: "ProductCode" }, // 合同编号
            { name: "InventoryQuantity" }, // 库存数量(份)
            { name: "SalePrice" }, // 市场价格
            { name: "CostPrice" }, // 平台价格
            { name: "EquityServiceRate" }, // 权益平台服务费
            { name: "PlatformServiceRate" }, // 平台服务费
            { name: "Integral" }, // 让利积分
            { name: "PlatformServicePrice" }, // 平台结算价格（元）
            { name: "EquityServicePrice" }, // 小程序结算价格（元）
            { name: "StatusName" }, // 审核状态
            { name: "CreateTime" }, // 提交时间
            { name: "IsOpenSale" }, // 是否允许在其他国企平台售卖
            { name: "IsRefund" }, // 是否允许退款
            { name: "EffectiveTime" }, // 生效时间
            { name: "MainPicturePath" }, // 主图
            { name: "ProductFlagList" }, // 产品类型
            { name: "ID", filterKey: "=", filterValue: this.rightsId }, // ID
            { name: "ProductID" }, // 产品ID
            { name: "ExpireTime" }, // 过期时间
            { name: "MinimumQuantity" }, // 起售数量
            { name: "EquityFlagListName" }, // 权益标签
            { name: "EquityList" }, // 权益集合
            // {name: "ProductList"},	// 产品列表
            { name: "TransferRuleIDName" }, // 采购公司限制
            { name: "EquityFlagList" }, // 权益标签
            { name: "Status" }, // 审核状态
            { name: "SecondaryPicturePath" }, // 副图
            { name: "TransferRuleID" }, // 采购公司限制
            { name: "UsersCount" }, // 使用人数
            { name: "FilePath" }, // 合同附件路径
            { name: "ProductName" }, // 产品名称
            { name: "IsRealNameAuthentication" }, // 是否需要实名信息
            { name: "Description" }, // 权益详情
            { name: "UseRuleDescription" }, // 使用规则详情
            { name: "IsRefundAudit" } // 退款是否需要审核
          ],
          paramData: {
            CompanyID:
              this.octopus.passport.authorization.company == 1
                ? "NULL"
                : this.octopus.passport.authorization.company
          }
        },
        data => {
          if (data.status.code == 200) {
            this.compileData = data.content.queryData[0];

            if (this.compileData.TypeID == 1) {
              this.api_1241(this.compileData.ID);
              return;
            }
            this.alreadyList = this.arr1;
            this.buyList = this.arr2;
            let str = "";
            let newArr = [...this.alreadyList, ...this.buyList];
            str = newArr.map(v => v.ID).join(",");
            this.$nextTick(() => {
              this.api_1241(str);
            });
          } else {
            this.octopus.tips.error(data);
            this.drawer = false;
          }
        }
      );
    },

    drawerOp(arr1, arr2) {
      this.drawer = true;
      this.arr1 = arr1;
      this.arr2 = arr2;
    },
    drawerClose() {
      this.drawer = false;
    },
    // 获取权益详情
    getCompileData() {
      return new Promise((resolve, reject) => {
        let o = this;
        o.octopus.request.api.post(
          "/Octopus/Engine/List",
          {
            id: 1184,
            cellData: [
              { name: "CompanyID" }, // 子权益公司ID
              { name: "FlagList" }, // 权益标签
              { name: "FlagListName" }, // 权益标签
              { name: "ID" }, // ID
              { name: "Name" }, // 权益标题
              { name: "SalePrice" }, // 市场价格
              { name: "SoldQuantity" }, // 已售数量
              { name: "TypeID" } // 权益类型
            ],
            paramData: {
              ID: o.compileData.ID
            }
          },
          function(data) {
            if (data.status.code == 200) {
              o.compileData = data.content.queryData[0];
              //
              // resolve(data.content.queryData);
            } else {
              o.octopus.tips.error(data);
              reject(false);
            }
          }
        );
      });
    },
    // 获取退款规则
    getRefundRules() {
      this.refundList = {};
      let o = this;
      let filterKey = "=";
      let filterValue = this.compileData.ID;
      if (this.compileData.TypeID == 2) {
        filterKey = "in";
        const arr = [...this.alreadyList, ...this.buyList];
        filterValue = arr.map(item => item.ID);
      }
      o.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1210,
          cellData: [
            { name: "CompanyID" }, // 公司
            { name: "CreateTime" }, // 创建时间
            { name: "CreateUserID" }, // 创建人
            {
              name: "EquityID",
              filterKey: filterKey,
              filterValue: filterValue
            }, // 权益
            { name: "EquityName" }, // 权益
            { name: "ID" }, // ID
            { name: "InventoryID" }, // 库存
            { name: "Name" }, // 规则名称
            { name: "ProductID" }, // 产品ID
            { name: "ServiceCharge" }, // 服务费
            { name: "Status" }, // 状态
            { name: "TimeLimit" }, // 时间限制
            { name: "TypeID" }, // 类型ID
            { name: "UpdateTime" } // 修改时间
          ]
        },
        function(data) {
          if (data.status.code == 200) {
            if (o.compileData.TypeID == 1) {
              o.refundList.push({
                title: data.content.queryData[0].EquityName,
                list: data.content.queryData
              });
            } else {
              const obj = {};
              data.content.queryData.map(item => {
                if (!obj[item.EquityID]) {
                  obj[item.EquityID] = [];
                }
                obj[item.EquityID].push({
                  title: item.EquityName,
                  list: item
                });
              });
              Object.keys(obj).map(key => {
                o.refundList.push({
                  ID: key,
                  list: obj[key]
                });
              });
            }
          } else {
            o.octopus.tips.error(data);
          }
        }
      );
    },
    // 退款规则
    api_1241(str, type = 2) {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1241,
          cellData: [
            { name: "CompanyID" }, // 公司ID
            { name: "CreateTime" }, // 创建时间
            { name: "CreateUserID" }, // 创建人
            { name: "EquityID" }, // 权益ID
            { name: "EquityName" }, // 权益名称
            { name: "ID" }, // ID
            { name: "InventoryID" }, // 库存
            { name: "Name" }, // 规则名称
            { name: "ProductID" }, // 产品
            { name: "ServiceCharge" }, // 手续费（%）
            { name: "Status" }, // 是否启用
            { name: "TimeLimit" }, // 时限（默认小时）
            { name: "TypeID" }, // 规则类型（1小时  2天）
            { name: "UpdateTime" } // 修改时间
          ],
          paramData: {
            EquityID: str
          }
        },
        datas => {
          if (datas.status.code == 200) {
            this.refundList = [];
            let item = datas.content.queryData;

            if (this.compileData.TypeID == 1) {
              this.refundList.push({
                title: this.compileData.Name,
                list: item
              });
              return;
            }

            let arr = [...this.alreadyList, ...this.buyList];
            arr.map(v => {
              let find = item.filter(x => v.ID == x.EquityID);
              if (find) {
                this.refundList.push({
                  title: v.Name,
                  list: find
                });
              } else {
                this.refundList.push({
                  title: v.Name,
                  list: []
                });
              }
            });
          } else {
            this.octopus.tips.error(datas);
          }
        }
      );
    }
  }
};
</script>
<style scoped>
.flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.rightsImage {
  width: 14rem;
  height: 14rem;
  border-radius: 1rem;
  display: inline-block;
  margin-right: 1rem;
}

.rightsList {
  display: flex;
  margin-left: 2em;
  margin: 2rem 0 2rem 2em;
}

.rightsList > div:nth-child(1) {
  width: 25%;
}

.rightsList > div:nth-child(2) {
  flex: 1;
}

.rightsList .rights-tag {
  margin-right: 15px;
  border-radius: 2px;
  border: 1px solid #3f9eff;
  color: #3f9eff;
  padding: 1px 2px;
  font-size: 1rem;
  /* display: flex; */
  justify-content: center;
  align-items: center;
}

.rightsList .auth-tag {
  margin-right: 10px;
  border: 1px solid #a570e9;
  background-color: #a570e9;
  color: #fff;
}

.deadlin .title {
  font-size: 1.8rem;
  font-weight: bold;
}

.deadline-box {
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  padding: 4px 0 4px 4px;
  margin-top: 4px;
}

.rightsContent {
  flex-direction: column;
}

.rightsContent > div:nth-child(2) {
  margin-top: 10px;
  text-indent: 2em;
}

.rights > div:nth-child(1) {
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.drawer_c {
  font-size: 1.6rem;
  height: 85vh;
  overflow: auto;
  margin-top: 3rem;
  padding: 0 3rem;
  background-color: #fff;
}

.tableList {
  width: 100%;
  max-height: 34vh;
  overflow: auto;
  margin-bottom: 1rem;
}

.tableList > div {
  display: flex;
  font-size: 1.6rem;
  justify-content: space-between;
  text-align: center;
}

.tableList .table_title {
  font-weight: 700;
  background-color: #f7f9fb;
  line-height: 5rem;
  padding: 0 0.8rem;
  /* text-align: left; */
}

.tableList .table_list {
  padding: 1rem 0.8rem;
  margin: 1rem 0;
  line-height: 8rem;
  box-shadow: 0px 2px 6px 0px rgba(180, 171, 206, 0.4);
}

.tableList .table_list .img_box {
  display: flex;
}

.tableList .table_list img {
  width: 8rem;
  height: 8rem;
  border-radius: 1rem;
  margin-right: 2rem;
}

.tableList .table_list .img_box .text {
  display: flex;
  justify-content: center;
  flex-flow: column;
  line-height: 2rem;
  text-align: left;
}

.tableList .table_list .lable_list {
  display: flex;
  justify-content: center;
  flex-flow: column;
  line-height: 2.5rem;
  text-align: left;
  font-size: 1.8rem;
}

/* .tableList .table_list .lable_list{
color: #c3c3c3;
font-size: 1.3rem;
text-align: left;
} */
.tableList .table_list .lable_list span {
  border: 1px solid #c3c3c3;
  padding: 0 0.7rem;
  border-radius: 0.5rem;
  color: #c3c3c3;
  font-size: 1.3rem;
  text-align: left;
  margin: 0.2rem;
  display: inline-block;
}

.btn_cls {
  position: absolute;
  bottom: 1rem;
  right: 2rem;
  display: flex;
}

.cancel_box {
  line-height: 4rem;
  background-color: #f78c51;
  color: #fff;
  margin: 0 1rem;
  padding: 0 3rem;
  border-radius: 0.5rem;

  cursor: pointer;
}

.reject {
  background-color: #2e3037;
}

.type_tab {
  width: 100%;
  border-bottom: 1px solid #c3c3c3;
  display: flex;
}

.type_tab img {
  width: 2rem;
  vertical-align: middle;
  margin-right: 1rem;
  margin-top: -0.2rem;
}

.type_tab > div {
  font-size: 1.6rem;
  /* height: 4rem; */
  line-height: 4rem;
  margin-right: 4rem;
  cursor: pointer;
}

.type_tab_color {
  border-bottom: 3px solid #f78c51;
}

.pay_code {
  display: flex;
  margin-top: 1.5rem;
  text-align: center;
}

.pay_code .img_box img {
  width: 17rem;
}

.pay_code .text_box {
  text-align: left;
  margin-left: 2rem;
  display: flex;
  justify-content: center;
  flex-flow: column;
  font-size: 1.8rem;
}

.pay_code .text_box > div {
  margin: 1.5rem 0;
}

.pay_code .text_box span {
  margin: 0 1rem;
}

.font-bold {
  font-size: 1.6rem;
  font-weight: bold;
}

.rights_son_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rights_son {
  width: 100%;
  border-radius: 6px;
  padding: 6px 8px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.rights_son:not(:first-child) {
  margin-top: 10px;
}

.rights_son .title {
  font-size: 1.6rem;
  font-weight: bold;
}

.rights_son .date {
  font-size: 1.2rem;
  margin-top: 5px;
}

.rights_son .repert-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rights_son .repert-right {
  font-size: 2em;
  font-weight: bold;
  color: #ff4f17;
}

.contract-btn {
  margin-left: 3px;
  background-color: #f88c51;
  padding: 2px 4px;
  border-radius: 4px;
  border: 0;
  color: #fff;
}

.history {
  margin-left: 2em;
  margin-top: 1em;
}

.history .audit-item {
  display: flex;
}

.history .audit-item .audit-left {
  position: relative;
  width: 2px;
  height: 60px;
  border-radius: 4px;
  background-color: #dfdfdf;
}

.history .audit-item .audit-left::before {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff8755;
}

.history .audit-item .audit-right {
  margin-left: 16px;
}

.history .audit-item .audit-right .audit-right-box {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.history .audit-item .audit-right .audit-right-box:not(:first-child) {
  margin-top: 8px;
}

.history .audit-item .audit-right .audit-right-box .tag {
  font-size: 1em;
  padding: 1px 2px;
  color: #fff;
  border-radius: 2px;
  margin-right: 6px;
}

.history .audit-item .audit-right .audit-right-box .tag.success {
  background-color: #3fdf72;
}

.history .audit-item .audit-right .audit-right-box .tag.info {
  background-color: #43b4ff;
}

.history .audit-item .audit-right .audit-right-box .tag.error {
  background-color: #f75352;
}

.history .audit-item .audit-right .audit-right-box .date {
  margin-right: 6px;
}

.iframe {
  width: 100%;
  height: 100%;
}
.w100 {
  width: 98%;
}
.w100 >>> img {
  width: 90%;
}
.rules{
  border-radius: 10px;
  border: 1px solid #000;
  padding: 5px;
}
</style>
